<template>
  <el-aside :width="isCollapse? '64px':'200px'">
    <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu background-color="#545c64" active-text-color="#409EFF" text-color="#fff" :unique-opened="true" :collapse="isCollapse"
        :collapse-transition="false" router :default-active="activePath">
          <!-- 一级菜单 -->
          <el-submenu :index="items.id.toString()" v-for="(items,index) in menulist" :key="items.id">
            <template slot="title">
              <i :class="iconlist[index]"></i>
              <span>{{items.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="'/' + item.path" v-for="item in items.children" :key="item.id" @click="saveNavState('/' + item.path)">
             <!-- @click="saveNavState('/' + item.path)" -->
              <i class="el-icon-menu"></i>
              <span>{{item.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--  -->
      <!--   -->
</template>

<script>
export default {
name: 'ContaAside',
props: {
  menulist: {
    type: Array,
    default() {
      return []
    }
  }
},
created(){
  this.activePath = window.sessionStorage.getItem('activePath')
  console.log(this.activePath);
  // console.log('重新创建了');
},
data() {
  return {
    iconlist: [
      'iconfont icon-users',
      'iconfont icon-tijikongjian',
      'iconfont icon-shangpin',
      'iconfont icon-danju',
      'iconfont icon-baobiao'
    ],
    isCollapse: false,
    activePath: ''
  }
},
methods: {
  toggleCollapse() {
    this.isCollapse = !this.isCollapse
  },
  saveNavState(activePath) {
    // console.log(this.$route.path === activePath);
    console.log('执行了');
    window.sessionStorage.setItem('activePath',activePath)
    // this.activePath = activePath
    // console.log(this.$route.path);
    // this.activePath = this.$route.path
  }
}
}
</script>
<style lang="less" scoped>
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}
.iconfont {
  margin-right: 10px
}
.toggle-button {
  text-align: center;
  line-height: 24px;
  font-size: 10px;
  letter-spacing: 0.2em;
  background-color: #4a5064;
  color: #fff;
  cursor: pointer;

}
</style>